"use strict"

var uli = document.querySelector(".phb ul");
var temp3;

var p_xhr;
if(window.XMLHttpRequest){
	p_xhr = new XMLHttpRequest();
}else{
	p_xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
var url = "https://www.easy-mock.com/mock/5aab25e6e80e0d51a5160fb3/music";
p_xhr.open("GET",url+"/phb");
p_xhr.send();
p_xhr.addEventListener("readystatechange",function(){
	if(p_xhr.readyState==4 && p_xhr.status==200){
		var p_str = p_xhr.response;
		var p_obj = JSON.parse(p_str);
		var p_list = p_obj.data.topList
//		console.log(p_list[0]);
		for(var i=0;i<p_list.length;i++){
			temp3 = `<li class="topic_item">
						<div class="topic_main">
							<div class="pic"><img src="${p_list[i].picUrl}"/></div>
							<div class="cont">
								<h3>${p_list[i].topTitle}</h3>
								<p>1<span class="text_name">${p_list[i].songList[0].songname}</span>-${p_list[i].songList[0].singername}</p>
								<p>2<span class="text_name">${p_list[i].songList[1].songname}</span>-${p_list[i].songList[1].singername}</p>
								<p>3<span class="text_name">${p_list[i].songList[2].songname}</span>-${p_list[i].songList[2].singername}</p>
							</div>
						</div>
					</li>`
			uli.innerHTML += temp3;
		}
	}
})
